<template>
  <view class="u-p-20 u-border-top fix-bottom">
    <up-row type="flex" justify="space-around">
      <view @click="choose(0)">
        <uni-icons custom-prefix="iconfont" type="icon-crownfill" size="20" :color="$u.color.warning" v-if="index == 0"></uni-icons>
        <uni-icons custom-prefix="iconfont" type="icon-crown" size="20" v-else></uni-icons>
      </view>
      <view @click="choose(1)">
        <uni-icons custom-prefix="iconfont" type="icon-goodsfill" size="20" :color="$u.color.warning" v-if="index == 1"></uni-icons>
        <uni-icons custom-prefix="iconfont" type="icon-goods" size="20" v-else></uni-icons>
      </view>
      <view @click="choose(2)">
        <uni-icons custom-prefix="iconfont" type="icon-myfill" size="20" :color="$u.color.warning" v-if="index == 2"></uni-icons>
        <uni-icons custom-prefix="iconfont" type="icon-my" size="20" v-else></uni-icons>
      </view>
    </up-row>
  </view>
</template>

<script>
export default {
  props: ['activeIndex'],
  computed: {
    index: {
      get() {
        return this.activeIndex
      },
      set(val) {
        this.$emit('update:activeIndex', val)
      }
    }
  },
  methods: {
    choose(i) {
      this.index = i;
    }
  },
}
</script>

<style lang="scss" scoped>
.fix-bottom {
  // position: fixed;
  // left: 0px;
  // bottom: 0px;
  // width: 100%;
  // z-index: 999;
  background: #ffffff;
}
</style>